﻿@{
    ViewBag.Title = "ViewMyPosts";
}
<link href="../../Content/Styles/page.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("../../Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<style>
    #headbox
    {
        height: 40px;
        background-color: #c30;
        text-align: left;
        font-size: 1.5em;
        padding-left: 10px;
        color: white;
        position: relative;
    }
    
    
    #titlepost
    {
        color: #1D95CB;
    }
    
    .post_image_small
    {
        width: 122px;
        padding: 0 9px;
        float: left;
        position: relative;
    }
    .post_image_small a
    {
        padding: 3px;
        border-style: solid;
        border-width: 1px;
        border-color: #DDD #CACACA #ACACAC;
        line-height: 0;
        display: inline-block; /* background-color: white;*/
        position: relative;
        border-radius: 2px;
        box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1),0 0 0 black;
        color: #1D95CB;
        text-decoration: none;
        list-style: none;
    }
    .post_image_small img
    {
        width: 114px;
        height: 74px;
    }
    #results
    {
        overflow: hidden;
        margin: 0;
        list-style: none;
        padding: 5px;
    }
    .result
    {
        border-bottom: 1px solid #D8D8D8;
        padding: 10px 0;
        position: relative;
        overflow: hidden;
        list-style: none;
        margin-bottom: 5px;
    }
    .status
    {
        text-decoration: none;
        display: inline-block;
        color: white;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 900;
        padding: 4px 4px;
        width: 100px;
        text-align: center;
        float: left;
    }
    .status:hover
    {
        background-color: #EF411A;
    }
</style>
<script type="text/javascript">
    //Hoangdx Code Change Avaliable
    //var id = 0;
    function ChangeAvalaibleCf(AvailableID, unAvailableID, id, pid) {
        $(document).each(function () {
            $("#dialog-confirm-changeavailable").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Change": function () {
                        ChangeAvalaible(AvailableID, unAvailableID, id, pid);
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    }

    function ChangeAvalaible(AvailableID, unAvailableID, id, pid) {
        $(document).each(function () {
            $.post("/Posts/ChangeAvailable", { pID: pid },
                function (data) {
                    if (data == "0") {
                        //alert("Some error");
                        $(AvailableID).css("display", "none");
                        $(unAvailableID).css("display", "none");
                        $("#DBerror").css("display", "block");
                    }
                    else {
                        if (id == 0) {// Change not available
                            $(AvailableID).css("display", "none");
                            $(unAvailableID).css("display", "block");
                            id = 1;
                        }
                        else if (id == 1) {//change to available
                            //$(unid).replaceWith($(pid));
                            $(unAvailableID).css("display", "none");
                            $(AvailableID).css("display", "block");
                            id = 0;
                        }
                    }
                }, "json");
        });
    }
    function DeletePost(pid) {
        $(document).each(function () {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Delete": function () {
                        Delete(pid);
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    }
    function Delete(postId) {
        var url = "/Posts/DeletePost";
        $.ajax({
            type: "Post",
            url: url,
            data: { id: postId }, // them bien neu muon truyen them
            success: function (data) {
                $("#resultsPost").replaceWith(data);
                history.pushState(document.getElementById("resultsPost").innerHTML, "", "#Deleted");
                popstate("#resultsPost");
                return false;
                //alert(data);
            }
        });
    }
    popstate = function (url) {
        if (url = "#Deleted") {
            $('#resultsPost').load(url + '#resultsPost ul');
        }
    }
    window.onpopstate = function (event) {
        if (event.state) {
            popstate(window.location.href);
            event.preventDefault();
        }
    }
</script>
<div id="resultsPost">
    <div id="headbox">
        <div style="font-size: 20px; position: absolute; top: 10px;">
            Manage Posts
        </div>
    </div>
    <div class="detailcontainer" style="height: auto;border:none">
        <ul id="results">
            @{
            
                if (HttpContext.Current.Session["username"] != null)
                {
                    if (ViewBag.ListPostOfUser != null && ViewBag.ListPostOfUser.Count > 0)
                    {
                        foreach (var post in ViewBag.ListPostOfUser)
                        {
                            string divID = "Div" + post.PostID;
                            string undivID = "unDiv" + post.PostID;
                <li class="result">
                    <div class="post_image_small">
                        <a href="/Posts/ViewPost?postID=@post.PostID" title="@post.Title">
                            <img src="@post.Image" alt="@post.Title"/>
                        </a>
                    </div>
                    <h3 class="post_title">
                        <a href="/Posts/ViewPost?postID=@post.PostID">@post.Title</a>
                    </h3>
                    <h5>
                        Created at : @post.TimeCreated</h5>
                    @if (@post.Status == 0)
                    {
                        <div class="status" style="background: #4D97F1">
                            Under review</div>
                    }
                    @if (@post.Status > 0)
                    {
                        <div class="status" style="background: yellowgreen;">
                            Accepted</div>
                        if (@post.Available)
                        {
                        <div style="position: relative; display: block" id="@divID">
                            <img src="../../Content/images/icons/available-1.png" alt="House status" title="House status"
                                style="width: 30px; height: 30px; position: absolute; left: 710px;" />
                            <input type="button" onclick="ChangeAvalaibleCf(@divID,@undivID,0,@post.PostID)" value="ChangeAvailable" class="btn btn-primary"
                            style="position: absolute; left: 760px;" />
                        </div>
                        <div style="position: relative; display: none" id="@undivID">
                            <img src="../../Content/images/icons/notavailable.png" alt="House status" title="House status"
                                style="width: 30px; height: 30px; position: absolute; left: 710px;" />
                            <input type="button" onclick="ChangeAvalaibleCf(@divID,@undivID,1,@post.PostID)" value="ChangeAvailable" class="btn btn-primary"
                                style="position: absolute; left: 760px;" />
                        </div>
                        <div style="position: relative; display: none" id="DBerror">
                            <input type="button" value="Server Error" class="btn btn-danger delete" style="position: absolute;
                                left: 800px;" />
                        </div>
                        }
                        else
                        {
                        <div style="position: relative; display: none" id="@divID">
                            <img src="../../Content/images/icons/available-1.png" alt="House status" title="House status"
                                style="width: 30px; height: 30px; position: absolute; left: 710px;" />
                            <input type="button" onclick="ChangeAvalaibleCf(@divID,@undivID,0,@post.PostID)" value="ChangeAvailable" class="btn btn-primary"
                            style="position: absolute; left: 760px;" />
                        </div>
                        <div style="position: relative; display: block" id="@undivID">
                            <img src="../../Content/images/icons/notavailable.png" alt="House status" title="House status"
                                style="width: 30px; height: 30px; position: absolute; left: 710px;" />
                            <input type="button" onclick="ChangeAvalaibleCf(@divID,@undivID,1,@post.PostID)" value="ChangeAvailable" class="btn btn-primary"
                                style="position: absolute; left: 760px;" />
                        </div>
                        <div style="position: relative; display: none" id="DBerror">
                            <input type="button" value="Server Error" class="btn btn-danger delete" style="position: absolute;
                                left: 800px;" />
                        </div>
                        }
                    }
                    @if (@post.Status < 0)
                    {
                        <div class="status" style="background: red;">
                            Rejected</div>
                    }
                    <div style="position: absolute; left: 900px;">
                        <span><a href="/Posts/EditPost?id=@post.PostID" class="btn btn-primary">Edit Post</a></span>
                    </div>
                    @*                <div style="position: absolute; left: 1000px;">
                    <span><a href="#" class="btn btn-danger delete">Delete Post</a></span>
                </div>*@
                    <input type="button" onclick="DeletePost(@post.PostID)" value="Delete Post" class="btn btn-danger delete"
                            style="position: absolute; left: 1000px;" />
                    <div id="dialog-confirm" title="Delete Post" style="display: none">
                        <p style="color: Red">
                            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
                            Are you sure to delete this post?</p>
                    </div>
                </li>
                        }

                    }
                    else
                    {
                <h3>
                    You don't create any post.<br />
                    Click <a href="/Posts/CreateStep1">here</a> to create post for your house.</h3>
                    }

                }
                else
                {
                <h3>
                    You must login to view your posts or register an account to begin post.</h3>
                }
    
            }
        </ul>
    </div>
</div>
<div id="dialog-confirm-changeavailable" title="Change Available Of Post" style="display: none">
                        <p style="color: Red">
                            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
                            Are you sure to change available this post?</p>
                    </div>